<template>
	<!-- 文件预览组件 -->
	 <div style="background-color: #d3d3d3;">
		 <div style="position: fixed;top: 100px;z-index: 99;">
		 	<el-button-group>
		 	  <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
		 	  <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
		 	</el-button-group>
		 	<div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
		 </div>
	    
	    <pdf
		style="padding: 0 100px;"
	      :page="pageNum"
	      :src="url"
	      @progress="loadedRatio = $event"
	      @num-pages="pageTotalNum=$event" 
	      ></pdf>
	  </div>

</template>

<script>
	import pdf from 'vue-pdf'
	export default {
	  name: 'Pdf',
	  components: {
	    pdf,
	  },
	  created() {
	    let src	=this.$route.query.url
		var headers = {
		    'token': window.localStorage.getItem('token'), 
		};
		var loadingTask = pdf.createLoadingTask({
		    url:src,
		    httpHeaders:headers
		});
		
		this.url=loadingTask
		
	  },
	  data() {
	    return {
	      url: null,
	      pageNum: 1,
	      pageTotalNum: 1, // 总页数
	      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
	    }
	  },
	  methods: {
	    // 上一页
	    prePage() {
	      let page = this.pageNum
	      page = page > 1 ? page - 1 : this.pageTotalNum
	      this.pageNum = page
	    },
	
	    // 下一页
	    nextPage() {
	      let page = this.pageNum
	      page = page < this.pageTotalNum ? page + 1 : 1
	      this.pageNum = page
	    }
	  }
	}
</script>

<style>
</style>
